<template>
<div class="bpage-container">
    <Layout id="bpage-scrollarea">
        <Header>
          <BHeader :show-user="true"></BHeader>
        </Header>

        <Content class="bpage-content content-container">
            <!-- 顶部 -->
            <div class="bpage-top" v-if="isTop">
                <!-- 标题 -->
                <div class="bpage-title" v-if="typeof(topTitle) === 'string'">
                    {{topTitle}}
                </div>
                <!-- 面包屑 -->
                <div class="bpage-bread" v-else>
                    <Breadcrumb>
                        <BreadcrumbItem v-for="(item,index) in topTitle" :key="index">
                            {{item}}
                        </BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <!-- 操作按钮 -->
                <div class="bpage-button">
                    <slot name="button"></slot>
                </div>
            </div>   
            
            <!-- 主体内容 -->
            <slot name="content"></slot>
        </Content>

        <Footer class="bpage-footer">
          <b-footer :isLogin="false" :isMain='true'></b-footer>
        </Footer>
    </Layout>
    <to-scroll-top ref="toTop" area-id="bpage-scrollarea"></to-scroll-top>
</div>
   
</template>

<script>
    import BHeader from 'components/BHeader'; //页头
    import BFooter from 'components/BFooter'; //页脚
    import ToScrollTop from 'components/commons/ToScrollTop';   //回到顶部
    export default {
        components: { BHeader, BFooter, ToScrollTop },
        props: {
            isTop: {//是否展示顶部
                type: Boolean,
                default: false
            },
            topTitle: {//展示标题(如果有标题则隐藏面包屑，两者互斥)
                type: [String,Array]
                //:topTitle="我是单独的标题"
                //:topTitle="['我是面包屑一级标题','我是面包屑二级标题']"
            }
        },
        data() {
            return {

            }
        },
        methods: {
            toScrollTop(){  //返回顶部
                this.$refs.toTop.toScrollTop()
            }
        }
    }
</script>

<style lang="less">
    .bpage-container{
        position: absolute;
        width: 100%;
        height: 100%;
        // overflow: auto;

        >.ivu-layout{
            height: 100%;
            background: @color-Background;
            overflow: auto;

            .ivu-layout{
                flex-grow: 1;
                overflow: hidden;
                position: relative;
                .content-container{
                    overflow: auto;
                    height: 100%;

                    
                }
            }
        }

        .b-header{
            .b-header-bg{
                max-width: 100%;
                padding: 0 30px;
            }
        }
        .ivu-layout-header{
            padding: 0;
        }

        .bpage-content{
            width: @min-width;
            margin: 30px auto 0;

            .bpage-top{
                display:flex;
                height: 32px;
                line-height: 32px;
                margin-bottom: 20px;

                .bpage-bread{
                    flex: 1;
                }

                .bpage-title{
                    flex: 1;
                    font-size: 16px;
                    color: @color-Title;
                    font-weight: bold;
                }

                .bpage-button{
                    
                }
            }
        }

        .bpage-footer{
            width: @min-width;
            margin: 50px auto 0;

            .b-footer{
              padding: 0;
            }
        }
    }
</style>

